<template>
    <div>

        <div class="find_top">
            <div class="back_div" @click="goBack">
                <img src="http://py9lewv6q.bkt.clouddn.com/images_1571197231返回.png" alt="" class="find_back">
            </div>
            <div class="input_div">
                <input type="text" class="find_input" v-model="input">
                
           </div>
           <div class="shop_find" @click="search">
                 店内搜
           </div>
        </div>




         <div class="order_by">
           <div class="order_by_price" @click="order_by_price(status)">
             <div class="order_by_price_text">
             按价钱排序
             </div>
             <div class="order_by_price_images_sheng" >
             <img src="http://py9lewv6q.bkt.clouddn.com/images_1571292712升序.png" alt="" width="20">
            </div>
           <div class="order_by_price_images_jiang"  >
             <img src="http://py9lewv6q.bkt.clouddn.com/images_1571292872降序.png" alt="" width="20">
            </div>   
          </div>
      </div>

    <div class="baby_tui">
              <div class="shop_baby" v-for="(item, index) in shop_baby" :key="index">
                    <img :src="item.s_baby_photo" alt="" class="shop_baby_images"> 
                    <p>&nbsp;&nbsp;{{item.s_baby_name}}</p>
                    <p>&nbsp;&nbsp;￥{{item.s_baby_price}}</p>
              </div>
              <center>
              <p>没有更多商品了。。。</p>
              </center>
          </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            shop_baby:'',
            input:'',
            status:''
        }
    },
    created(){
        let data=this.$route.params.data
        this.shop_baby=data;
      
    },
    methods:{
        goBack() {
         this.$router.go(-1);
      },
      search(){
        let find=this.input;
           let that=this;
        this.$axios({
         
            url:'http://www.shop.com/index.php/api/user/search_pu',
            params:{
              search_name:find,
                shop_id:'1'
            }
           
            
        })
        .then(function(res){
            let data = res.data;
             that.shop_baby=data;
         
        })
      },
      order_by_price(status){

          this.input?find=this.input:find= this.$route.params.find;


        // if(this.input){
        //     let find="T恤";
        //     alert(123);
        // }else{
        //      let find="简约";
        //     alert(456);
        // }
        console.log(find)
        let that=this
            this.$axios({
          url:'http://www.shop.com/index.php/api/user/search',
          params:{
                search_name:find,
                status:status,
                shop_id:1
            }
          
        })
        .then(function(res){
            console.log(res)
            that.shop_baby=res.data
            if(that.status==1){
              that.status=2
            }else{
              that.status=1
            }
        })
      }
    }
}
</script>
<style lang="">
    .baby_tui{
  width: 100%;
  background-color: rgb(148, 139, 130)
}
.shop_baby{
  width: 200px;
  height: 300px;
  background-color:rgb(225, 225, 228);
  display: inline-block;
  margin-left:14px;
  border-radius: 5px;
  margin-top: 10px;
}
.order_by_price_text{
   float: left;
   margin-left: 20px;
   
}
.order_by_price_images_sheng{
    float: left;
    position: relative;
    top: -6px;
}
.order_by_price_images_jiang{
  float: left;
   position: relative;
    left: -20px;
    top:5px;
}
.order_by_price{
  float: left;
  width: 140px;
  height: 40px;
  background: rgb(238, 209, 209);
  border-radius: 20px;
  margin-top: 5px;
  line-height: 40px;

}
.order_by{
  width: 100%;
  height: 50px;
  background-color: #fff;
}





.find_back{
    width: 40px;
    margin-top:20px; 


}
.shop_find{
    text-align: center;
    color: aliceblue;
    width: 70px;
    height:34px;
    background-color: rgb(100, 98, 98);
    float: left;
    margin-top: 24px;
    line-height: 30px;
    border-radius: 20px;
    margin-left: 20px;
}
.back_div{
  float: left;
}
.input_div{
 float: left;
 line-height: 75px;
 margin-left: 30px;
}
   .find_input{
       width: 250px;
       height: 30px;
       border-radius: 20px;
       margin-top:-20px; 
       
      outline: none;
   }
   html{
        background-color: rgb(226, 222, 222)
   }
   .find_top{
       width: 100%;
       height: 70px;
       background-color: rgb(163, 159, 159)
   }
</style>